<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>考勤统计 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 80px;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 1px solid #e5e5e5;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="profile.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">考勤统计</h1>
    </div>

    <!-- Month Selector -->
    <div class="bg-white px-4 py-3 border-b border-gray-100 flex items-center justify-between">
        <button class="text-gray-600">
            <i class="fas fa-chevron-left"></i>
        </button>
        <span class="text-lg font-semibold text-gray-800">2024年1月</span>
        <button class="text-gray-600">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>

    <!-- Summary Stats -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-chart-pie text-blue-500 mr-2"></i>
            本月汇总
        </div>
        <div class="grid grid-cols-4 gap-3">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600">22</div>
                <div class="text-xs text-gray-500 mt-1">出勤</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600">0</div>
                <div class="text-xs text-gray-500 mt-1">迟到</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-orange-600">1</div>
                <div class="text-xs text-gray-500 mt-1">请假</div>
            </div>
            <div class="text-center">
                <div class="text-2xl font-bold text-red-600">0</div>
                <div class="text-xs text-gray-500 mt-1">旷工</div>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100">
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">出勤率</span>
                <span class="text-green-600 font-bold">95.7%</span>
            </div>
            <div class="mt-2 bg-gray-200 rounded-full h-2">
                <div class="bg-green-500 h-2 rounded-full" style="width: 95.7%"></div>
            </div>
        </div>
    </div>

    <!-- Calendar View -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-calendar-alt text-blue-500 mr-2"></i>
            考勤日历
        </div>
        <!-- Week Days -->
        <div class="grid grid-cols-7 gap-1 mb-2">
            <div class="text-center text-xs text-gray-500 py-2">日</div>
            <div class="text-center text-xs text-gray-500 py-2">一</div>
            <div class="text-center text-xs text-gray-500 py-2">二</div>
            <div class="text-center text-xs text-gray-500 py-2">三</div>
            <div class="text-center text-xs text-gray-500 py-2">四</div>
            <div class="text-center text-xs text-gray-500 py-2">五</div>
            <div class="text-center text-xs text-gray-500 py-2">六</div>
        </div>
        <!-- Calendar Days -->
        <div class="grid grid-cols-7 gap-1">
            <div class="text-center py-2 text-gray-400 text-sm">31</div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-green-100 flex items-center justify-center">
                    <span class="text-sm text-green-600 font-semibold">1</span>
                </div>
                <div class="text-xs text-green-600 mt-1">正常</div>
            </div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-green-100 flex items-center justify-center">
                    <span class="text-sm text-green-600 font-semibold">2</span>
                </div>
                <div class="text-xs text-green-600 mt-1">正常</div>
            </div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-green-100 flex items-center justify-center">
                    <span class="text-sm text-green-600 font-semibold">3</span>
                </div>
                <div class="text-xs text-green-600 mt-1">正常</div>
            </div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-orange-100 flex items-center justify-center">
                    <span class="text-sm text-orange-600 font-semibold">4</span>
                </div>
                <div class="text-xs text-orange-600 mt-1">请假</div>
            </div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-green-100 flex items-center justify-center">
                    <span class="text-sm text-green-600 font-semibold">5</span>
                </div>
                <div class="text-xs text-green-600 mt-1">正常</div>
            </div>
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-green-100 flex items-center justify-center">
                    <span class="text-sm text-green-600 font-semibold">6</span>
                </div>
                <div class="text-xs text-green-600 mt-1">正常</div>
            </div>
            <!-- More days... -->
            <div class="text-center py-2">
                <div class="w-8 h-8 mx-auto rounded-full bg-blue-500 flex items-center justify-center">
                    <span class="text-sm text-white font-semibold">15</span>
                </div>
                <div class="text-xs text-blue-600 mt-1">今天</div>
            </div>
            <!-- Simplified for demo -->
            <div class="text-center py-2 text-gray-400 text-sm col-span-6">...</div>
        </div>
        <!-- Legend -->
        <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-center gap-4 text-xs">
            <div class="flex items-center">
                <div class="w-3 h-3 rounded-full bg-green-100 mr-1"></div>
                <span class="text-gray-600">正常</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 rounded-full bg-orange-100 mr-1"></div>
                <span class="text-gray-600">请假</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 rounded-full bg-red-100 mr-1"></div>
                <span class="text-gray-600">旷工</span>
            </div>
            <div class="flex items-center">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-1"></div>
                <span class="text-gray-600">今天</span>
            </div>
        </div>
    </div>

    <!-- Detail List -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4 mb-6">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-list text-blue-500 mr-2"></i>
            详细记录
        </div>
        <div class="space-y-3">
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">2024-01-15 星期一</div>
                        <div class="text-xs text-gray-500">上班 08:30 | 下班 18:15</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">2024-01-14 星期日</div>
                        <div class="text-xs text-gray-500">上班 08:25 | 下班 18:20</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-calendar-times text-orange-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">2024-01-13 星期六</div>
                        <div class="text-xs text-gray-500">事假</div>
                    </div>
                </div>
                <span class="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded">请假</span>
            </div>
            <div class="flex items-center justify-between py-2">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-check text-green-600"></i>
                    </div>
                    <div>
                        <div class="text-sm font-semibold text-gray-800">2024-01-12 星期五</div>
                        <div class="text-xs text-gray-500">上班 08:30 | 下班 18:10</div>
                    </div>
                </div>
                <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">正常</span>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="flex justify-around py-2">
            <a href="home.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="approval.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-clipboard-check text-xl mb-1"></i>
                <span class="text-xs">审批</span>
            </a>
            <a href="attendance-stats.html" class="flex flex-col items-center py-2 px-4 text-blue-600">
                <i class="fas fa-chart-bar text-xl mb-1"></i>
                <span class="text-xs">统计</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center py-2 px-4 text-gray-400">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </a>
        </div>
    </div>
</body>
</html>

